<template>
  <div class="analytics-dashboard">
    <el-row :gutter="20">
      <!-- 折线图 -->
      <el-col :span="12">
        <el-card>
          <div slot="header">折线图 - 数据趋势</div>
          <div id="line-chart" class="chart" />
        </el-card>
      </el-col>

      <!-- 柱状图 -->
      <el-col :span="12">
        <el-card>
          <div slot="header">柱状图 - 销售分析</div>
          <div id="bar-chart" class="chart" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 堆叠图 -->
      <el-col :span="12">
        <el-card>
          <div slot="header">堆叠柱状图 - 区域销售对比</div>
          <div id="stacked-bar-chart" class="chart" />
        </el-card>
      </el-col>

      <!-- 饼图 -->
      <el-col :span="12">
        <el-card>
          <div slot="header">饼图 - 销售份额</div>
          <div id="pie-chart" class="chart" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 雷达图 -->
      <el-col :span="24">
        <el-card>
          <div slot="header">雷达图 - 各维度数据对比</div>
          <div id="radar-chart" class="chart" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'AnalyticsDashboard',
  mounted() {
    this.initLineChart()
    this.initBarChart()
    this.initStackedBarChart()
    this.initPieChart()
    this.initRadarChart()
  },
  methods: {
    // Function to generate a random color
    getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    },

    // Function to generate random data
    getRandomData(length, max) {
      return Array.from({ length }, () => Math.floor(Math.random() * max));
    },

    initLineChart() {
      const chart = echarts.init(document.getElementById('line-chart'))
      const option = {
        title: { text: '数据趋势' },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: { type: 'value' },
        series: [{
          name: '销售额',
          type: 'line',
          lineStyle: { color: this.getRandomColor() },
          data: this.getRandomData(7, 300)
        }]
      }
      chart.setOption(option)
    },

    initBarChart() {
      const chart = echarts.init(document.getElementById('bar-chart'))
      const option = {
        title: { text: '销售分析' },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['Q1', 'Q2', 'Q3', 'Q4']
        },
        yAxis: { type: 'value' },
        series: [{
          name: '销售额',
          type: 'bar',
          itemStyle: { color: this.getRandomColor() },
          data: this.getRandomData(4, 1000)
        }]
      }
      chart.setOption(option)
    },

    initStackedBarChart() {
      const chart = echarts.init(document.getElementById('stacked-bar-chart'))
      const option = {
        title: { text: '区域销售对比' },
        tooltip: { trigger: 'axis' },
        legend: { data: ['区域A', '区域B', '区域C'] },
        xAxis: {
          type: 'category',
          data: ['Q1', 'Q2', 'Q3', 'Q4']
        },
        yAxis: { type: 'value' },
        series: [
          { name: '区域A', type: 'bar', stack: '总量', itemStyle: { color: this.getRandomColor() }, data: this.getRandomData(4, 1000) },
          { name: '区域B', type: 'bar', stack: '总量', itemStyle: { color: this.getRandomColor() }, data: this.getRandomData(4, 1000) },
          { name: '区域C', type: 'bar', stack: '总量', itemStyle: { color: this.getRandomColor() }, data: this.getRandomData(4, 1000) }
        ]
      }
      chart.setOption(option)
    },

    initPieChart() {
      const chart = echarts.init(document.getElementById('pie-chart'))
      const option = {
        title: { text: '销售份额' },
        tooltip: { trigger: 'item' },
        series: [
          {
            name: '销售份额',
            type: 'pie',
            radius: '50%',
            data: [
              { value: Math.floor(Math.random() * 1000), name: '电子产品', itemStyle: { color: this.getRandomColor() } },
              { value: Math.floor(Math.random() * 1000), name: '家用电器', itemStyle: { color: this.getRandomColor() } },
              { value: Math.floor(Math.random() * 1000), name: '服装', itemStyle: { color: this.getRandomColor() } },
              { value: Math.floor(Math.random() * 1000), name: '食品', itemStyle: { color: this.getRandomColor() } },
              { value: Math.floor(Math.random() * 1000), name: '其他', itemStyle: { color: this.getRandomColor() } }
            ]
          }
        ]
      }
      chart.setOption(option)
    },

    initRadarChart() {
      const chart = echarts.init(document.getElementById('radar-chart'))
      const option = {
        title: {text: '各维度数据对比'},
        tooltip: {},
        legend: {data: ['预算分配', '实际开销']},
        radar: {
          indicator: [
            {name: '销售', max: 6500},
            {name: '管理', max: 16000},
            {name: '信息技术', max: 30000},
            {name: '客服', max: 38000},
            {name: '研发', max: 52000},
            {name: '市场', max: 25000}
          ]
        },
        series: [
          {
            name: '预算 vs 开销',
            type: 'radar',
            data: [
              {value: this.getRandomData(6, 7000), name: '预算分配'},
              {value: this.getRandomData(6, 7000), name: '实际开销'}
            ]
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.analytics-dashboard {
  padding: 20px;
}

.chart {
  width: 100%;
  height: 400px;
}
</style>
